<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';
import { ref } from 'vue';
import { addListenerDragEEMouseDown, removeListenerDragEEMouseDown } from '@/plugins';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
import GlobalLogo from '../global-logo/index.vue';
import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
import GlobalSearch from '../global-search/index.vue';
import ThemeButton from './components/theme-button.vue';
import UserAvatar from './components/user-avatar.vue';
import LockScreen from './components/lock-screen.vue';
import MinimaxCloseToolbar from './components/minimax-close-toolbar.vue';

defineOptions({
  name: 'GlobalHeader'
});

interface Props {
  /** Whether to show the logo */
  showLogo?: App.Global.HeaderProps['showLogo'];
  /** Whether to show the menu toggler */
  showMenuToggler?: App.Global.HeaderProps['showMenuToggler'];
  /** Whether to show the menu */
  showMenu?: App.Global.HeaderProps['showMenu'];
}

defineProps<Props>();

const appStore = useAppStore();
const themeStore = useThemeStore();
const { isFullscreen, toggle } = useFullscreen();

const headerToolbarCollapse = ref(false);
const toggleHeaderToolbarCollapse = () => {
  headerToolbarCollapse.value = !headerToolbarCollapse.value;
};

function handleMouseDown(event: any) {
  addListenerDragEEMouseDown(event);
}

function handleMouseUp() {
  removeListenerDragEEMouseDown();
}
</script>

<template>
  <DarkModeContainer
    class="h-full flex-y-center px-12px shadow-header"
    @mousedown="handleMouseDown"
    @mouseup="handleMouseUp"
  >
    <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
    <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
    <div v-if="showMenu" :id="GLOBAL_HEADER_MENU_ID" class="h-full flex-y-center flex-1-hidden"></div>
    <div v-else class="h-full flex-y-center flex-1-hidden">
      <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
    </div>
    <div class="h-full flex-y-center justify-end">
      <MenuToggler
        arrow-icon
        :collapsed="headerToolbarCollapse"
        :reversal-tooltip="true"
        @click="toggleHeaderToolbarCollapse"
      />
      <NCollapseTransition :show="headerToolbarCollapse" class="flex-y-center justify-end">
        <GlobalSearch />
        <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
        <LangSwitch
          :lang="appStore.locale"
          :lang-options="appStore.localeOptions"
          @change-lang="appStore.changeLocale"
        />
        <ThemeSchemaSwitch
          :theme-schema="themeStore.themeScheme"
          :is-dark="themeStore.darkMode"
          @switch="themeStore.toggleThemeScheme"
        />
        <ThemeButton />
<!--        <UserAvatar />-->
<!--        <LockScreen />-->
      </NCollapseTransition>
      <MinimaxCloseToolbar v-if="!appStore.isMobile" />
    </div>
  </DarkModeContainer>
</template>

<style scoped></style>
